<template>
    <div class="index-container">
        <div class="com-1">
            <div class="w">
                <img src="../assets/index-1-title.png" style="display: block"/>
                <a class="us" href="#" @click="goLogin">立即加入</a>
            </div>
        </div>
        <div class="com-2 w">
            <img src="../assets/index-com-2-title.png"/>
            <ul class="jy-scene">
                <li>
                    <img src="../assets/index-com-2-icon1.png"/>
                    <p class="title">CRM系统</p>
                    <p>你可以将客户相关的招标、中标、拟建等信息集成到客户的CRM系统中，实现搜索、订阅招标信息，增加CRM系统在同类产品中的竞争力；</p>
                    <a href="#" @click="goS(0)">了解更多+</a>
                </li>
                <li>
                    <img src="../assets/index-com-2-icon2.png"/>
                    <p class="title">企业信息查询</p>
                    <p>你可以将企业相关的中标、招标信息集成到企业信息中，用于企业征信、企业信息查询、招标信息订阅等产品形态，为用户提供更多增值服务。</p>
                    <a href="#" @click="goS(1)">了解更多+</a>
                </li>
                <li>
                    <img src="../assets/index-com-2-icon3.png"/>
                    <p class="title">垂直行业门户</p>
                    <p>你可以将单个行业，或者多个细分行业的招标、中标、拟建等招标信息集成到门户网站内容中，向用户提供招标信息的浏览，搜索，订阅等更多内容服务。</p>
                    <a href="#" @click="goS(2)">了解更多+</a>
                </li>
                <li>
                    <img src="../assets/index-com-2-icon4.png"/>
                    <p class="title">区域门户</p>
                    <p>你可以按省份或者城市，将招标、中标、拟建等招标信息集成到门户网站中，向用户提供招标信息的浏览、搜索、订阅等更多内容服务。</p>
                    <a href="#" @click="goS(3)">了解更多+</a>
                </li>
            </ul>
            <img class="other" src="../assets/index-com-2-other.png"/>
            <p class="link" style="padding-top: 23px">更多其他需求请联系我们：
                <a style="text-decoration: underline;" href="mailto:bd@topnet.net.cn">bd@topnet.net.cn</a>
            </p>
        </div>
        <div class="com-3">
            <div class="inner w">
                <p><img src="../assets/index-com-3-title.png"/></p>
                <img src="../assets/index-com-3-app.png"/>
            </div>
        </div>
        <div class="com-4">
            <div class="inner w">
                <img src="../assets/index-com-4-title.png"/>
                <ul class="list">
                    <li>
                        <i class="iconfont icon-guanjianci"></i>
                        <p class="show">按自定义关键词<br/>获取招标信息</p>
                        <p class="hideen">开发者可以通过单个关键词，或多个关键词来设置数据规则，获取招标、中标、拟建等信息。</p>
                        <span class="bg">关键词</span>
                    </li>
                    <li>
                        <i class="iconfont icon-qiyeshenfenrz"></i>
                        <p class="show">按细分行业<br/>获取招标信息</p>
                        <p class="hideen">开发者可以根据自身所属行业来设置数据规则，获取招标、中标、拟建等信息。</p>
                        <span class="bg">行业</span>
                    </li>
                    <li>
                        <i class="iconfont icon-qiyebangonglou"></i>
                        <p class="show">按省份、城市<br/>获取招标信息</p>
                        <p class="hideen">开发者可以按照省份，城市来设置数据规则，获取招标、中标、拟建等信息。</p>
                        <span class="bg">城市</span>
                    </li>
                    <li>
                        <i class="iconfont icon-lingdaitie2"></i>
                        <p class="show">按企业名称<br/>获取招标信息</p>
                        <p class="hideen">开发者可以按照用户的企业名称来设置数据规则，获取该企业的中标信息。</p>
                        <span class="bg">企业</span>
                    </li>
                    <li>
                        <i class="iconfont icon-sousuo"></i>
                        <p class="show">按关键词搜索<br/>获取招标信息</p>
                        <p class="hideen">用户在开发者的网站上搜索信息时，搜索结果将展示与搜索内容相关的招标、中标、拟建等信息。</p>
                        <span class="bg">搜索</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="com-5">
            <div class="w">
                <img class="title" src="../assets/index-com-5-title.png"/>
                <div class="item-box">
                    <div class="item-option">
                        <img src="../assets/i-01.png" alt="img">
                        <div class="op">
                            <span class="tit">千万级</span>数据
                            <br>
                            <span class="tip">4000+万条招标信息数据库，日新增 5万多条</span>
                        </div>
                    </div>
                    <div class="item-option">
                        <img src="../assets/i-00.png" alt="img">
                        <div class="op">
                            <span class="tit">百万级</span>推送
                            <br>
                            <span class="tip">每日向用户推送招标信息几百万次</span>
                        </div>
                    </div>
                </div>
                <div class="item-box">
                    <div class="item-option">
                        <img src="../assets/i-02.png" alt="img">
                        <div class="op">
                            <span class="tit">99%</span>信息覆盖率
                            <br>
                            <span class="tip">1000+个官方数据源覆盖政府招标、企业招标</span>
                        </div>
                    </div>
                    <div class="item-option">
                        <img src="../assets/i-03.png" alt="img">
                        <div class="op">
                            <span class="tit">分钟级</span>更新
                            <br>
                            <span class="tip">招标信息极速更新</span>
                        </div>
                    </div>

                </div>
                <p>
                    <a class="us" href="#" @click="goLogin">立即加入</a>
                </p>
            </div>
        </div>

    </div>
</template>

<script>
  export default {
    name: 'indexContainer',
    data: function () {
      return {}
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted: function () {}, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {
      goLogin () {
        this.$bus.$emit('userLogin', true)
      },
      goS (i) {
        this.$router.push({name: 'scene', params: {i: i}})
      }
    } // 函数

  }
</script>

<style lang="scss">
    .index-container {
        box-sizing: border-box;
        .com-1 {
            width: 100%;
            height: 636px;
            background: url(../assets/index-1-bg.jpg) center center no-repeat;
            background-size: cover;
            box-sizing: border-box;
            position: relative;
            padding-top: 140px;
            .us {
                position: absolute;
                left: 50%;
                margin-top: 51px;
                width: 237px;
                margin-left: -118px;
                border-radius: 5px;
                height: 66px;
                padding-left: 58px;
                box-sizing: border-box;
                line-height: 66px;
                background: #ffcc00 url(../assets/jiantou.png) 180px center no-repeat;
                color: #fff;
                text-shadow: 1px 1px 0px #90909087;
                font-size: 28px;
                transition: all 1s;
                &:hover {
                    transform: scale(0.9);
                }
            }
        }
        .com-2 {
            height: 700px;
            background-color: #fff;
            box-sizing: border-box;
            padding-top: 60px;
            text-align: center;
            .jy-scene {
                display: flex;
                justify-content: space-between;
                margin-top: 60px;
                li {
                    width: 260px;
                    height: 374px;
                    text-align: center;
                    position: relative;
                    p {
                        font-size: 12px;
                        line-height: 22px;
                    }
                    .title {
                        margin-top: 38px;
                        font-size: 18px;
                        margin-bottom: 26px;
                    }
                    a {
                        display: block;
                        font-size: 15px;
                        color: #2cb7ca;
                        position: absolute;
                        left: 36%;
                        bottom: 60px;
                        transition: all 0.5s;
                        &:hover {
                            color: red;
                        }
                    }
                }
            }
            .other {
                margin-top: 20x;
                margin-bottom: 20px;
            }
            .link {
                width: 100%;
                font-size: 25px;
                color: #757575;
                a {
                    font-size: 24px;
                    transition: all 0.5s;
                    color: #2cb7ca;
                    &:hover {
                        color: red;
                    }
                }
            }
        }
        .com-3 {
            border-top: 1px solid #eeeeee;
            padding-top: 60px;
            height: 540px;
            text-align: center;
            .inner {
                background: #fff url(../assets/index-com-3-bg.jpg) 0 0 no-repeat;

                text-align: center;
                p {
                    margin-bottom: 60px;
                }
            }
        }
        .com-4 {
            height: 548px;
            background: #f6f6f6 url(../assets/index-com-4-bg.png) 0 0 no-repeat;
            padding-top: 60px;
            box-sizing: border-box;
            text-align: center;
            .list {
                display: flex;
                margin-top: 60px;
                li {
                    cursor: pointer;
                    height: 310px;
                    padding: 0 20px;
                    box-sizing: border-box;
                    text-align: center;
                    flex: 1;
                    position: relative;
                    transition: all 0.5s;
                    background-color: #34c2df;
                    &:hover {
                        background-color: #fff;
                    }
                    &:hover .bg {
                        display: block;
                    }
                    &:hover .show {
                        display: none;
                    }
                    &:hover .hideen {
                        display: block;
                        transform: translateY(-20px);
                    }
                    &:hover i {
                        color: #2CB7CA;
                        transform: translateY(-20px);
                    }
                    i {
                        display: block;
                        color: #fff;
                        font-size: 50px;
                        margin-top: 92px;
                        margin-bottom: 25px;
                        transition: all 0.5s;
                    }
                    .bg {
                        display: none;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        color: #f3f6f9;
                        font-size: 61px;
                    }
                    .show {
                        font-size: 18px;
                        color: #fff;
                        line-height: 30px;
                    }
                    .hideen {
                        display: none;
                        line-height: 25px;
                        color: #2cb7ca;
                        transition: all 0.5s;
                    }
                    &:nth-of-type(2) {
                        background-color: #27b8d5;
                        &:hover {
                            background-color: #fff;
                        }
                    }
                    &:nth-of-type(3) {
                        background-color: #1cb0ce;
                        &:hover {
                            background-color: #fff;
                        }
                    }
                    &:nth-of-type(4) {
                        background-color: #17a7c4;
                        &:hover {
                            background-color: #fff;
                        }
                    }
                    &:nth-of-type(5) {
                        background-color: #1993ab;
                        &:hover {
                            background-color: #fff;
                        }
                    }
                }
            }
        }
        .com-5 {
            height: 626px;
            background: #fff url(../assets/index-com-5-bg.jpg) 0 0 no-repeat;
            background-size: cover;
            position: relative;
            box-sizing: border-box;
            padding-top: 55px;
            text-align: center;
            .title {
                margin-bottom: 60px;
            }
            .item {
                display: flex;
                justify-content: space-between;
                margin-bottom: 30px;
            }
            .us {
                position: absolute;
                left: 50%;
                margin-top: 60px;
                width: 237px;
                margin-left: -118px;
                border-radius: 5px;
                height: 66px;
                box-sizing: border-box;
                line-height: 66px;
                background: #2cb7ca url(../assets/jiantou.png) 180px center no-repeat;
                color: #fff;
                font-size: 24px;
                transition: all 1s;
                &:hover {
                    transform: scale(0.9);
                }
            }
        }
        .item-box {
            display: flex;
            flex-direction: row;
            &:nth-last-child(2) {
                margin-top: 24px;
            }
            .item-option {
                &:nth-last-child(even) {
                    margin-right: 20px;
                }
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 588px;
                height: 121px;
                box-sizing: border-box;
                background-color: white;
                border: 1px solid #e6e6e6;
                img {
                    width: 125px;
                    border-right: 1px solid #e6e6e6;
                }
                .op {
                    margin-top: 28px;
                    font-size: 28px;
                    color: #333333;
                    line-height: 26px;
                    padding-left: 28px;
                    text-align: left;
                    .tit {
                        color: #2cb7ca;
                    }
                    .tip {
                        font-size: 18px;
                        color: #666666;
                        line-height: 56px;
                    }
                }
            }
        }
    }
</style>